<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数与普通函数的区别</title>
</head>
<body>
<script>
/*
* 1.箭头函数的出现就是为了解决ES5中this指向混乱的问题
* 2.箭头函数没有自己的this,它的this来自父级上下文,并且永远指向父级上下文
* 3.箭头函数的this不会在调用的时候被改变, 因为箭头函数在声明的时候它的this就已经被永久的确定了
* */
// 箭头函数的this，始终指向父级上下文
{
    var a = 100;
    let obj = {
        a: 200,
        fn: function (){
            console.log(this.a);//obj.a = 200;
        },
        fn2: ()=>{
            console.log(this);//window.a = 100
            console.log(this.a);//window.a = 100
        }
    }
    obj.fn3 = ()=>{
        console.log(this);
    }
    obj.fn();
    obj.fn2();
    obj.fn3();
}
// 箭头函数是匿名函数，不能作为构造函数，不能使用new
{
    // function Person(name){
    //     this.name = name;
    //     this.age = 20;
    //     console.log("Person-->",this);
    // }
    // Person.prototype.sayHello = function (){
    //     console.log(this.name, "hello world")
    // }
    // let person = new Person("哈哈");
    // person.sayHello();

    let Person = ()=>{
        this.name = name;
        this.age = 20;
    }
    // let person = new Person();
    //Uncaught TypeError: Person is not a constructor //Person不是一个构造函数
}
// 箭头函数没有原型属性
{
    let person = ()=>{
    };
    // person.prototype.sayHello = 1;
    //Uncaught TypeError: Cannot set property 'sayHello' of undefined
    console.log(person)
    console.log(person.prototype)
}
// 箭头函数内没有arguments，可以用展开运算符...解决
{

    //复制原有数组的功能
    // Array.prototype.slice=function(index=0,num=this.length){
    //     let newArr = [];
    //     for(let i=index;i<num;i++){
    //         newArr.push(this[i])
    //     }
    //     return newArr
    // }


//普通函数  arguments=>参数集合=>伪数组=>...
    // function sum(a,b){
    //     let sumNum = 0;
    //     let likeArr = arguments;//伪数组 --> 原型指向object
    //     //伪数组转换成数组
    //     let arr = Array.from(likeArr);
    //     let arr2 = Array.prototype.slice.call(likeArr);
    //     // let arr3 = [].slice.call(likeArr);
    //
    //     arr.forEach((i)=>{
    //         sumNum+=i;
    //     })
    //
    //     console.log(sumNum);
    // }
    let sum = (...args)=>{
        //箭头函数内没有arguments
        // console.log(arguments);
        console.log(args);
        let sumNum = 0;
        args.forEach((i) => {
            sumNum += i;
        })
        console.log(sumNum);
    }
    sum(1,2,3,4,5);
}
// 箭头函数不能通过call()\apply()\bind()方法直接修改它的this指向 但是,可以正常传参
{
    let sum = (...args)=>{
        console.log(this,args);
    }
    sum.call({},1,2,3)
}

</script>
</body>
</html>